
<template>
  <div id="pageDetail">
    <div class="product-nav">
      <div class="nav-item" :class="[productIndex==i?'navActive':'']" v-for="(v,i) in $tm('parameterNav')" :key="i" @click="changeSection(i)">
        {{ v }}
      </div>
    </div>
    <div class="productName">
        全高清1080P<span>CMOS相机</span>
    </div>
    <div class="product-introduce">
        采用全新1080P CMOS图像传感器，传输，画质更加清晰地呈现被摄物细节，提供更卓越的图像品质内置多功能调节！
    </div>
    <div class="product-banner"   data-aos="fade-up"  data-aos-once='true'>
        <div class="banner-pag">
            <div class="banner-pagL" :class="[swiperIndex>1?'pagActive':'']" @click="changePre">
                ←
            </div>
            <div class="banner-pagR" :class="[swiperIndex<3?'pagActive':'']"  @click="changeNext">
                →
            </div>
            <span>3/{{ swiperIndex }}</span>
        </div>
        <div class="banner-bagPic">
            <img :src="require(`@/assets/img/partsBanner${swiperIndex}.png`)" alt="" />
        </div>
        <div class="banner-smallPic">
            <div class="samllPic-item" v-for="(v,i) in 3" :key="i" @click="changeBanner(i)">
                <img :src="require(`@/assets/img/partsBanner${i+1}.png`)" alt="" />
            </div>
        </div>
    </div>
    <div class="product-traits"   data-aos="fade-up"  data-aos-once='true'>
        <h1>产品特点</h1>
        <div class="traitsDetail">
            <div class="traitsDetail-l">
                <div class="model">
                    <span>型号</span>
                    <p>
                        YW3608
                    </p>
                </div>

                
                <ul class="traits-list">
                    <li class="traits-item" v-for="(v,i) in 7" :key="i">
                        采用松下传感器，图像色彩还原接近原色
                    </li>
                </ul>
            </div>
            <div class="traitsDetail-r">
                <img src="@/assets/img/productPage1.png" alt="" />
            </div>
        </div>
    </div>
    <div class="product-parts"   data-aos="fade-up"  data-aos-once='true'>
        <h1>产品配件</h1>
        <div class="parts-list">
            <div class="parts-item" v-for="(v,i) in 3" :key="i">
                <div class="parts-item-pic">
                    <img :src="require(`@/assets/img/parts${i+1}.png`)" alt="" />
                </div>
                <h2>USB2.0线</h2>
                <p>多种传输接口！利用多种VGA和USB2.0传输接口进行传输，更方便快捷，多重选择</p>
            </div>
        </div>
    </div>
    <div class="product-size"   data-aos="fade-up"  data-aos-once='true'>
        <h1>产品尺寸</h1>
        <div class="sizePic">
            <img src="@/assets/img/productPage1.png" alt="" />
        </div>
    </div>
  </div>
</template>
<script>
import API from '@/utils/request.js';
export default {
    name:'page2',
    data(){
        return{
            loopOpen:false,
            swiperIndex:1,
            productIndex:0,
            id:1,
            navList:['产品介绍','技术参数'],
            detailData:{},
            productDetail:{},
        }
    },
    mounted(){
        this.id = this.$route.query.id
        this.productDetail = JSON.parse(sessionStorage.getItem('productDetail'))
        this.getCamInfo();
    },
    methods:{
        changePre(){
            if(this.swiperIndex-1>0){
                this.swiperIndex--;
            }
        },
        changeNext(){
            if(this.swiperIndex+1<=3){
                this.swiperIndex++;
            }
        },
        changeBanner(i){
            console.log(i,this.swiperIndex)
            if(this.swiperIndex==i+1) return false;
            this.swiperIndex = i+1;
        },
        // 产品参数
        getCamInfo(){
            API.getCamInfo({cam_id:this.id}).then(res=>{
                if(res.code==200){
                this.detailData = res.data;
                }
            })
        },
        changeSection(n){
            if(n==this.productIndex) return false;
            let path = '/product'
            switch(n){
                case 0:
                    path += '/pageDetail'
                    break;
                case 1:
                    path += '/parameter'
                    break;     
                default:
                    break;
            }
            this.productIndex = n
            this.$router.push({path:path,query:{id:this.id}})
        },
    }
}
</script>
<style lang="scss">
#pageDetail{
    width: 100%;
    padding: 0 0 r(121.88);
    background-color: #fff;
    .productName{
        width: 100%;
        text-align: center;
        color: #E15100;
        font-size: r(100);
        line-height: r(145);
        span{
            color: #273443;
        }
    }
    .product-introduce{
        width: r(1479);
        line-height: r(72);
        font-size: r(40);
        color: #273443;
        opacity: .5;
        text-align: center;
        margin: r(42) auto 0;
    }
    .product-banner{
        width: 100%;
        margin-top: r(53);
        @include display(bottom,between);
        padding: 0 r(106.48) 0 r(150);
        box-sizing: border-box;
        .banner-pag{
            @include display(center,left);
            margin-bottom: r(44);
            .banner-pagL,.banner-pagR{
                width: r(58);
                height: r(58);
                border: r(1) solid #E15100;
                text-align: center;
                line-height: r(58);
                font-size: r(22);
                color: #E15100;
                cursor: pointer;
            }
            .banner-pagR{
                margin-left: r(35);
            }
            .pagActive{
                background-color: #E15100;
                color: #fff;
            }
            span{
                font-size: r(26);
                color: #273443;
                opacity: 0.5;
                line-height: r(42);
                margin-left: r(56);
            }
        }
        .banner-bagPic{
            width: r(806);
            height: r(825);
        }
        .banner-smallPic{
            width: r(160.52);
            margin-bottom: r(14.43);
            .samllPic-item{
                width: 100%;
                height: r(1 60.52);
                background-color: #F0F4FA; 
                margin-bottom: r(60);           
            }

        }
    }
    .product-traits{
        margin-top: r(209);
        h1{
            font-size: r(70);
            text-align: center;
            color: #273443;
        }
        .traitsDetail{
            width: 100%;
            @include display(top,left);
            &-l{
                margin: r(128) r(153) 0 r(150);
                .model{
                    width: r(348);
                    height: r(85);
                    @include display(center,left);
                    border: r(1) solid #E15100;
                    color: #E15100;
                    font-size: r(40);
                    font-weight: bold;
                    padding-right: r(30);
                    span{
                        width: r(133);
                        height: r(85);
                        line-height: r(85);
                        font-size: r(40);
                        font-weight: 500;
                        color: #fff;
                        text-align: center;
                        background-color: #E15100;
                        margin-right: r(31);
                    }
                }
                .traits-list{
                    width:r(717);
                    margin-top: r(75);
                    .traits-item{
                        font-size: r(34);
                        line-height: r(61);
                        color: #273443;
                        opacity: .5;
                    }
                }
            }
            &-r{
                width: r(943);
                height: r(572);
                background-color: #F0F4FA;
                position: relative;
                margin-top: r(192);
                img{
                    position: absolute;
                    top: r(-146);
                    left: r(46);
                    width: r(853);
                    height: r(853);
                }
            }
        }
    }
    .product-parts{
        margin-top: r(294);
        h1{
            font-size: r(70);
            color: #273443;
            text-align: center;
            line-height: r(101);
        }
        .parts-list{
            margin: r(141) 0 r(291);
            width: 100%;
            padding: 0 r(142) 0 r(149);
            box-sizing: border-box;
            @include display(center,between);
            .parts-item{
                width: r(442);
                &-pic{
                    width: 100%;
                    height: r(290);
                    @include display(center,center);
                    img{
                        width: auto;
                        height: auto;
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
                h2{
                    font-size: r(60);
                    color: #E15100;
                    line-height: r(87);
                    text-align: center; 
                    padding: r(81) 0 r(25);
                }
                p{
                    font-size: r(34);
                    line-height: r(61);
                    color: #273443;
                    opacity: .5;
                    text-align: center;
                    
                }
            }
        }
    }
    .product-size{
        width: 100%;
        h1{
            font-size: r(70);
            line-height: r(101);
            color: #273443;
            text-align: center;
        }
        .sizePic{
            width: r(1851);
            height: r(1094.12);
            position: relative;
            img{
                position: absolute;
                top: r(-51);
                left: 0;
                width: r(1851);
                height: r(1144.12);
            }
        }
    }
}
.product-nav{
    width: 1200px;
    margin: 101px auto;
    height: 78px;
    @include display(center,right);
    border-bottom: 1px solid rgba(39,52,67,.5);
    .nav-item{
        height: 78px;
        color: rgba(39,52,67,.5);
        font-size: 32px;
        margin-left: 109px;
        cursor: pointer;
    }
    .navActive{
        color: #E15100;
        position: relative;
        cursor: pointer;
    }
    .navActive::after{
        position: absolute;
        display: block;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background:#E15100;
        animation: sclaesL .5s linear;
    }
}
// .index{
//     .footer{
//         background-color: #273443 !important;
//         h1,p{
//             color: #fff !important;
//         }
//     }
// }
</style>